<template>
  <div class="outBox">
    <div class="header-nav">
      <div
        v-for="(item, index) in navItem"
        :key="index"
        :class="[{ active: index === currentActive }, { item: true }]"
        @click="changeActive(index, item, $event)"
      >
        <i :class="item.icon" style="margin-right: 2px"></i>{{ item.name }}
      </div>
    </div>
    <div class="mover" :style="[{ left: locationLeft }]"></div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, defineEmits } from "vue";
 import {navItemType} from "@/type/mine"

const props = defineProps({
  navItem: {
    type: Array as () => Array<navItemType>,
    default: [{ name: "暂无数据" }],
  },
});
const $emit = defineEmits(["currentInfo"]);
const currentActive = ref<number>(0);
const locationLeft = ref<string>(`5%`);
const changeActive = (index: number, item:any, event: MouseEvent) => {
  locationLeft.value = `calc(${(event?.currentTarget! as HTMLElement).offsetLeft}px + 5%)`;
  currentActive.value = index;
  $emit("currentInfo", item);
};
</script>

<style lang="scss" scoped>
.outBox {
  position: relative;
  .header-nav {
    display: flex;
    height: 50px;
    .active {
      color: tomato;
      transition: all 0.3s;
    }
    .item {
      flex: 1;
      text-align: center;
      line-height: 50px;
      &:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }
    }
  }
  .mover {
    z-index: -1;
    border-radius: 30px;
    position: absolute;
    width: 15%;
    height: 40px;
    left: 0;
    background-color: rgba(255, 255, 255, 0.6);
    top: 5px;
    transition: left 0.5s ease-in-out;
  }
}
</style>
